<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>漏斗图：type = funnel</title>
  <script src="./echarts.js"></script>

  <style lang="css">
    #chart1 {
      width: 1000px;
      height: 650px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      title: {
        text: '漏斗图',
        subtext: '纯属虚构'
      },
      legend: {
        data: ['展现', '点击', '访问', '咨询', '订单'],
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
      },
      toolbox: {
        feature: {
          dataView: {
            show: true,
            readOnly: false
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      series: [
        {
          name: '预期',
          type: 'funnel',
          width: '80%',
          min: 0, // 低于最小值就不展示了
          max: 100,
          minSize: '0%', // 最小宽度
          maxSize: '100%',
          sort: 'descending',
          label: {
            normal: {
              formatter: '{b}预期',
              position: 'right' // left、| right | inside
            },
            emphasis: {
              fontSize: 20,
            }
          },
          labelLine: {
            show: true,
            length: 50,
            lineStyle: {
              color: 'red',
              width: 1
            },
          },
          itemStyle: {
            // color: 'teal',
            borderWidth: 1,
            opacity: 0.7
          },
          emphasis: {
            label: {
              fontSize: 20,
            },
            labelLine: {
              lineStyle: {
                color: 'blue'
              }
            }
          },
          data: [
            { value: 60, name: '访问' },
            { value: 40, name: '咨询' },
            { value: 20, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' },
          ]
        },
        {
          name: '实际',
          type: 'funnel',
          width: '80%',
          maxSize: '80%',
          label: {
            position: 'inside', // left、| right | inside
            formatter: '{c}%',
            textStyle: {
              fontSize: 20,
            }
          },
          emphasis: {
            label: {
              formatter: '{b}实际量：{c}%'
            },
          },
          data: [
            { value: 30, name: '访问' },
            { value: 10, name: '咨询' },
            { value: 5, name: '订单' },
            { value: 50, name: '点击' },
            { value: 80, name: '展现' },
          ]
        }
      ],
    })
  </script>
</body>

</html>